import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {View, Button, Image, Input, Form} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, isPhone, phoneNumPartOf} from "../../utils/common";

import './editPhone.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class EditPhone extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userInfo: {},
    smsCode: '', // 短信验证码 ,
    phoneNumber: '', // 手机号码
    getCodeText: '获取验证码',
    btnCodeStatus: false
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '修改手机号'})
    let userInfo = getRuntime().getUserInfo()
    this.setState({ userInfo })
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeInput(field: string, e) {
    this.setState({ [field]: e.detail.value })
  }

  getCode() {
    let { phoneNumber,btnCodeStatus } = this.state
    if(typeof btnCodeStatus === 'number') return
    if(!phoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!isPhone){getRuntime().showToast('请填写11位手机号码~'); return false}

    let { userStore } =  this.props.stores
    userStore.getSmsCode({
      form: {
        phoneNumber
      },callback: () => {
        this.countDown()
        getRuntime().showToast('验证码发送成功,请注意查收~')
      }
    })
  }

  // 验证码倒计时
  countDown() {
    let getCodeText = 60
    let timer = setInterval(() => {
      getCodeText--
      if(getCodeText===0){
        clearInterval(timer)
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false,
        })
      }else {
        this.setState({
          getCodeText: getCodeText+'s',
          btnCodeStatus: true,
        })
      }
    },1000)
  }

  submit() {
    let { userStore } = this.props.stores
    let { smsCode, phoneNumber } = this.state
    if(!phoneNumber){getRuntime().showToast('请填写手机号~'); return false}
    if(!smsCode){getRuntime().showToast('请填写验证码~'); return false}
    userStore.editPhone({
      form: {
        smsCode,
        phoneNumber
      },
      callback: () => {
        getRuntime().showToast('修改手机号成功~')
        setTimeout(() => {
          getRuntime().navigateTo('/pages/mine/index')
        }, 1000)
      }
    })
  }

  render() {
    let { userInfo, btnCodeStatus } = this.state
    return (
      <View className='edit-phone'>
        <View className='current-phone'>
          <View className='text f26'>当前手机号</View>
          <View className='phone color-dark'>{phoneNumPartOf(userInfo.phoneNumber)}</View>
        </View>

        <View className='form-wrap'>
          <Form onSubmit={this.submit.bind(this)}>
            <View className='content-30' style={{backgroundColor: '#fff'}}>
              <View className='form-wrap__group'>
                <View className='form-wrap__title'>新手机号</View>
                <View className='form-wrap__content'>
                  <Input className='input' name='phoneNumber' placeholderClass='placeholder-class' placeholder='请输入新手机号'
                         onChange={this.changeInput.bind(this,'phoneNumber')}
                  />
                </View>
              </View>
              <View className='form-wrap__group bbnone'>
                <View className='form-wrap__title'>验证码</View>
                <View className='form-wrap__content'>
                  <Input className='input' name='smsCode' placeholderClass='placeholder-class' placeholder='请输入短信验证码'
                         onChange={this.changeInput.bind(this,'smsCode')}
                  />
                  <View className='get-code color-theme' onClick={this.getCode.bind(this)} disabled={btnCodeStatus}>获取验证码</View>
                </View>
              </View>
            </View>
            <Button formType='submit' className='circular-submit'>确定更换</Button>
          </Form>
        </View>

      </View>
    )
  }
}

export default EditPhone
